<template>
  <div class="home">
    <my-header num="2">
      <!-- v-slot 简写形式 # -->
      <template #left> 
          返回
      </template>
      <template #center>
          首页
      </template>
      <template #right>
          编辑
      </template>
    </my-header>
    <my-list :list="list">
      <template #a="{i}">
          <button @click="del(i)">删除</button>
      </template>
    </my-list>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue'
import MyList from '../components/myList.vue'
// @ is an alias to /src
import { reactive,toRefs } from 'vue';
export default {
  name: 'Home',
  components: {
    MyHeader,
    MyList
  },
  setup(props) {
    const data = reactive({
      list: [1,2,4,5,6,7]
    })
    const del = (val) => {
       console.log(val);
    }
    return {
      ...toRefs(data),
      del
    }
  }
}
</script>
